<template>
	<view>
		<view style="background-color: #fff; padding: 20rpx 0;">
			<image v-if="person.HeadImage" :src="person.HeadImage" mode="widthFix"></image>
			<up-empty v-else mode="data" text="暂无人脸信息"></up-empty>
		</view>
		<view style="padding: 20rpx 40rpx;">
			个人信息
		</view>
		<up-cell-group :border="false" :custom-style="customeStyles">
			<up-cell title="房号" :value="room.CoName + room.CSName"></up-cell>
			<up-cell title="姓名" :value="person.Name"></up-cell>
			<up-cell title="手机号" :value="person.Mobile"></up-cell>
		</up-cell-group>

		<view class="my-bootom-btn">
			<up-button type="error" shape="circle" text="删除人脸" @click="handleDelete"></up-button>
			<up-button type="success" shape="circle" text="重新采集" @click="handleImage"
				style="margin-left: 20rpx;"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import mineApi from '../../../api/mine';
	const customeStyles = {
		backgroundColor: "#fff",
		marginTop: "10rpx"
	}
	const person = ref({});
	const room = ref({})
	onLoad((options) => {
		person.value = JSON.parse(options.info);
		room.value = JSON.parse(options.room)
	});

	const handleDelete = async () => {
		const res = await mineApi.delFace({
			HId: person.HId
		});
		if (res.State) {
			uni.showToast({
				icon: 'none',
				title: "删除人脸信息成功！"
			});
			person.handleImage = "";
		}
	}

	const handleImage = async () => {
		uni.chooseImage({
			count: 1,
			success: function(res) {
				console.log(res);
				uni.uploadFile({
					url: mineApi.uploadImage(),
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync("token")
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						let result = JSON.parse(uploadFileRes.data);
						if (result.State) {
							addFace(result.Data)
						} else {
							uni.showModal({
								showCancel: false,
								content: res.Msg || "上传异常，请稍后再试！"
							})
						}
					}
				});
			}
		})
	}

	const addFace = async (image) => {
		const reqObj = {
			HId: person.value.HId,
			FaceImg: image
		}
		const res = await mineApi.addFace(reqObj);
		if (res.State) {
			uni.showToast({
				icon: 'none',
				title: "人像上传成功"
			})
		} else {
			uni.showModal({
				showCancel: false,
				content: res.Msg || "上传异常，请稍后再试！"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-bootom-btn {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		padding: 20rpx 40rpx 80rpx;
		display: flex;
		justify-content: space-evenly;
	}
</style>